<template>
  <div>
    <Form ref="formInline" :model="map" inline>
      <div class="search">
        <Button type="primary" class="fl" icon="plus" @click="add">增加项目</Button>
        <FormItem>
          <Select v-model="map.city_code" style="width:100px">
            <Option
              v-for="item in provinceList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Input type="text" v-model="map.key" placeholder="关键字"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="getList">查询</Button>
        </FormItem>
      </div>
    </Form>

    <Table border stripe :loading="loading" :columns="columns" :data="data && data.data" :height="500"></Table>
    <Page class="page" :total="data && data.count" :page-size="data && data.pagesize" show-total @on-change="changePage"></Page>

  </div>
</template>
<script>
import { college, district } from "@/api";
import {
  Button,
  Table,
  Page,
  Form,
  FormItem,
  Input,
  Select,
  Option
} from "iview";

export default {
  components: {
    Button,
    Table,
    Page,
    Form,
    FormItem,
    Input,
    Select,
    Option
  },
  data() {
    return {
      loading: true,
      columns: [
        {
          title: "学校代码",
          key: "school_code"
        },
        {
          title: "学校名称",
          key: "school_name"
        },
        {
          title: "省市代码",
          key: "city_code"
        },
        {
          title: "省市名称",
          key: "city_name"
        },
        {
          title: "办学类型",
          key: "school_type"
        },
        {
          title: "性质类别",
          key: "school_category"
        },
        {
          title: "操作",
          key: "action",
          width: 350,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    icon: "edit"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        path: "/college/save",
                        query: {
                          id: params.row.id
                        }
                      });
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                    icon: "trash-a"
                  },
                  on: {
                    click: () => {
                      if (confirm("确定要删除吗？")) {
                        this.delete(params.row.id, params.index);
                      }
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: {},
      map: {
        page: 1,
        key: "",
        city_code: "",
        pageSize: 10
      },
      provinceList: [{ value: 110000, label: "北京" }]
    };
  },
  methods: {
    getList() {
      this.loading = true;
      college.getList(this.map).then(res => {
        this.data = res.data;
        this.loading = false;
      });
    },

    async getProvinceList() {
      this.loading = true;
      const map = { type: "province", page: 0 };
      let data = await district.getList(map);
      this.provinceList = data.data.map(item => {
        return {
          value: item.id,
          label: item.name
        };
      });
      this.provinceList.unshift({ value: "", label: "请选择" });
      this.loading = false;
    },

    delete(id, index) {
      college.delete(id).then(res => {
        // this.data.splice(index, 1);
        this.getList();
      });
    },
    changePage(index) {
      this.map.page = index;
      this.getList();
    },
    add() {
      this.$router.push("/college/save");
    }
  },
  mounted() {
    this.getList();
    this.getProvinceList();
  }
};
</script>
